<template>
  <div>
    <div class="search">
      <el-input v-model="query" placeholder="请输入设备名称或故障原因" style="width:250px" clearable></el-input>
      <el-date-picker
        v-model="beginTime"
        type="date"
        placeholder="故障日期"
        clearable
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="确认日期"
        clearable
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-cascader
        expand-trigger="hover"
        :options="options"  
        v-model="paramCodeId2"
        @change="handleChange"
        clearable
        placeholder="故障类型"
      ></el-cascader>
      <el-button @click="getalarmList" class="btntable2">查&nbsp;&nbsp;&nbsp;询</el-button>
    </div>
    <el-table
      ref="singleTable"
      :data="alarmList"
      @row-dblclick="goanalyze"
      class="tablecolor"
      style="width: 100%;text-align:center;margin-bottom:10px;"
    >
      <el-table-column type="index" label="序号" width="100px"></el-table-column>
      <el-table-column property="device.powerDistName" label="配电箱名称"></el-table-column>
      <el-table-column property="device.deviceName" label="设备名称"></el-table-column>
      <el-table-column property="device.deviceId" label="设备编号"></el-table-column>
      <el-table-column label="数值上限">
        <template slot-scope="scope">{{scope.row.limitTop}}{{scope.row.dataCode.measure}}</template>
      </el-table-column>
      <el-table-column label="数值下限">
        <template slot-scope="scope">{{scope.row.limitLow}}{{scope.row.dataCode.measure}}</template>
      </el-table-column>
      <el-table-column property label="故障值">
        <template slot-scope="scope">{{scope.row.value}}{{scope.row.dataCode.measure}}</template>
      </el-table-column>
      <el-table-column property="intime" label="故障时间"></el-table-column>
      <el-table-column property="lastwarnTime" label="最后故障时间"></el-table-column>
      <el-table-column property="reason" label="故障原因"></el-table-column>
      <el-table-column property="operatTime" label="确认时间"></el-table-column>
      <!-- <el-table-column property="data" label="操作人"></el-table-column> -->
      <el-table-column property="repairUseDay" label="维修报告"></el-table-column>
      <el-table-column property="state" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1">警告解除</span>
          <span v-else style="color:red">警告</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status!==1"
            class="btntable1"
            @click="dodeal(scope.row)"
          >故障确认</el-button>
          <el-button v-else class="btntable2">已解除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage"
      :pageSize="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    ></el-pagination>
    <el-dialog title="故障确认" :visible.sync="showdeal" center style="padding:30px 50px" width="50%">
      <el-form >
        <el-form-item label="配电箱名称：" label-width="100px">{{alermdata.device.powerDistName}}</el-form-item>
        <el-form-item label="设备名称：" label-width="100px">{{alermdata.device.deviceName}}</el-form-item>
        <el-form-item label="设备编号：" label-width="100px">{{alermdata.device.deviceId}}</el-form-item>
        <el-form-item label="设备编号：" label-width="100px">{{alermdata.intime}}</el-form-item>
        <el-form-item label="故障原因：" label-width="100px">
          <b style="color:red">{{alermdata.reason}}</b>
        </el-form-item>
        <el-form-item label="维修报告：" label-width="100px">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="repairUseDay" style="width:90%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showdeal = false" class="btntable2">取&nbsp;&nbsp;&nbsp;消</el-button>
        <el-button  @click="savedeal" class="btntable3">提&nbsp;&nbsp;&nbsp;交</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      alarmList: [],
      paramCodeId2: [],
      paramCodeId: '',
      query: '',
      beginTime: '',
      endTime: '',
      showdeal: false,
      repairUseDay: '',
      alermdata: { device: {} },
      currentPage: 1,
      pagesize: 10,
      total: 0,
      options: []
    }
  },
  created() {
    this.getcodeList()
    this.getalarmList()
  },
  methods: {
    goanalyze(row, column, event){
      console.log(row);
      this.$router.push({
        path:'/DataAnalysis',
        query:{
          supCodeId:row.paramCode.supCode.codeId,
          paramCodeId:row.paramCode.codeId,
          intime:row.intime
        }
      })
      
    },
    //  tableRowClassName({row, rowIndex}) {
    //    console.log(rowIndex% 2,'rowIndex');

    //     if (rowIndex % 2 == 0) {
    //       return 'warning-row';
    //     } else if (rowIndex % 2 == 1){
    //       return 'success-row';
    //     }
    //     return '';
    //   },
    getcodeList() {
      const req = {
        sup_code_id: '01'
      }
      this.spost(this.ts, '/code/findcodebysupcodeid', req).then(ts => {
        this.codeList = ts.d
        for (let i = 0; i < this.codeList.length; i++) {
          let a = { children: [] }

          a.value = this.codeList[i].codeId
          a.label = this.codeList[i].codeName
          for (let j = 0; j < this.codeList[i].childCode.length; j++) {
            let b = {}
            b.value = this.codeList[i].childCode[j].codeId
            b.label = this.codeList[i].childCode[j].codeName
            a.children.push(b)
          }
          this.options.push(a)
        }
        // console.log(this.options);
      })
    },
    handleChange(val) {
      this.paramCodeId = val[1]
      console.log(this.paramCodeId)
    },
    handleCurrentChange() {
      this.getalarmList()
    },
    getalarmList() {
      const req = {
        query: this.query,
        beginTime: this.beginTime,
        endTime: this.endTime,
        paramCodeId: this.paramCodeId,
        pageNum: this.currentPage - 1,
        pageSize: this.pagesize
      }
      this.spost(this.ts, '/data/getwarndata', req).then(ts => {
        // console.log(ts.d)
        this.alarmList = ts.d.content
        this.total = parseInt(ts.d.totalElements)
      })
    },
    dodeal(item) {
      this.alermdata = { device: {} }
      this.repairUseDay = ''
      this.alermdata = item
      this.showdeal = true
    },
    savedeal() {
      const req = {
        id: this.alermdata.id,
        repairUseDay: this.repairUseDay
      }

      this.$confirm('是否提交故障已确认?', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          this.spost(this.ts, '/data/warndatarelieve', req).then(ts => {
            this.$message({
              type: 'success',
              message: '故障确认成功！'
            })
            this.getalarmList()
            this.showdeal = false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style>
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
  background: #111c3f
}
.el-dialog__headerbtn .el-dialog__close {
  color: #eaa03b;
  font-size: 30px;
  padding-right: 50px;
}
.el-dialog__footer{
  padding: 10px 20px 30px
}
.el-cascader-menu, .el-cascader-menu__item.is-disabled:hover{
  background: #111c3f
}
.el-cascader-menu__item:focus:not(:active), .el-cascader-menu__item:hover{
    background: #111c3f;
  color: #23ffff
}
.el-picker-panel__icon-btn{
  color: #fff
}
.el-cascader-menus{
  background: #111c3f;
  color: #fff
}
.el-picker-panel{
  background: #111c3f;
  color: #fff;
  border: 1px solid #233a62
}
.el-textarea__inner{
      background: rgba(0,0,0,0.1);
}
.el-form-item__label{
  color:#36E5FF 
}
.el-form-item__content{
  color: #EAAF4F
}
.el-dialog--center{
  background: url('../../static/img/diabg.png') no-repeat;
  background-size: contain;
}
.el-dialog__title{
  font-family: pmzd;
  font-size: 24px;
  color: #fff
}
.el-button:focus,.el-button:hover {
  background: url('../../static/img/btntable3.png') no-repeat;
  background-size: cover;
  border: 0;
  padding:15px 36px;
  color:#fff
}
.el-button {
  border: 0;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: rgba(13, 23, 54, 0.5);
}
.el-pagination button:disabled {
  background: rgba(13, 23, 54, 0.5);
}
.el-pager li {
  background: rgba(13, 23, 54, 0.5);
  border: 1px transparent solid;
  color: #a9bfcc;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
}
.el-table td,
.el-table th.is-leaf {
  border: 0;
}
.el-input__inner {
  background: rgba(8, 10, 14, 0);
  border: 1px transparent solid;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
}
.el-table th,
.el-table tr {
  background: inherit;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(12, 58, 108, 0.4);
}
.el-date-editor .el-range-separator {
  padding: 0;
}
.cell {
  text-align: center;
}
.cell div {
  text-align: center;
}
.search {
  margin-bottom: 10px;
}
.el-range-separator {
  display: block;
  width: 24px;
}
</style>

